<template>
    <view class="container" >
        <view v-if="validateInfo.query_code" class="thumb">
            <image
                :src="validateInfo.product.thumbs_text"
            />
        </view>

        <view v-if="validateInfo.query_code" class="info">
            <view class="validate">
                <view class="icon">
                    
                    <image src="/static/images/validate_active.png"></image>
                </view>
                <view class="txt">
                    您查询的产品是官方正品!
                    <view>请放心使用！</view>
                </view>
            </view>

            <view class="line"></view>

            <view class="list">
                <view class="item">
                    <view class="name">
                        查询次数：
                    </view>
                    <view class="value">
                        {{ validateInfo.query_num }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        您查询的防伪码：
                    </view>
                    <view class="value">
                        <text>{{ validateInfo.query_code }}</text>
                        <u-icon name="复制" @click="CopyText" color="#2979ff"></u-icon>
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        首次查询时间：
                    </view>
                    <view class="value">
                        {{ validateInfo.queryTime_text }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        防伪码所属产品：
                    </view>
                    <view class="value">
                        {{ validateInfo.product.name }}
                    </view>
                </view>
            </view>

            <view class="code">
                <!-- show-menu-by-longpress 长安识别 -->
                <image :src="ImageCode.query_qrcode_text"height="100" show-menu-by-longpress mode="aspectFill"/>
            </view>
            <view>
                <u-button text="更换防伪码" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" @click="GetGenerate"></u-button>
            </view>
        </view>
        <!-- 数据为空的情况下 -->
        <u-empty
            v-if="validateInfo.query_code==''"
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/car.png"
        >
        </u-empty>
        <!-- 提醒框 -->
        <u-toast ref="uToast"></u-toast>
        <!-- 模态框 -->
        <u-modal :show="show" :showCancelButton="true" @cancel="show = false" @confirm="onAction"></u-modal>
    </view>
</template>

<script>
export default{
    onLoad: function (option) { 
		// console.log(option.code); //打印出上个页面传递的参数。
        this.code = option.code ? option.code : '';
	},
    onReady(){
        this.productInfo();
        this.GetGenerate();
    },
    data() {
        return {
            code:'',
            validateInfo:{
                query_code:'',
                product:{}
            },
            show:false,
            ImageCode:{},
        }
    },
    methods:{
        CopyText(){
            let text = this.validateInfo.query_code;
            uni.setClipboardData({
                data: text,
            });
        },
        async productInfo(){
            var result = await uni.$u.http.post('/business/productInfo',{
                code:this.code
            })
            if(result.code == 0){
                this.$refs.uToast.show({
                    type:'error',
                    message:result.msg
                })
                return false
            }
            this.validateInfo = result.data;
            this.validateInfo.product = result.data.products;
        },
        //更换防伪码
        async GetGenerate(){
            var result = await uni.$u.http.post('/business/GetGenerate',{
                code:this.code
            })

            
            if(result.code == 0){
                this.$refs.uToast.show({
                    type:'error',
                    message:result.msg
                })
                return false
            }
            this.ImageCode = result.data
        }
    }
}
</script>

<style>
page{
    background-color: #eee;
    padding-bottom:10px;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.thumb{
    width: 100%;
    height: 280px;
    border-radius:10px;
    overflow:hidden;
}

.thumb image{
    width:100%;
    height:100%;
    object-fit: cover;
}

.info{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.info .validate{
    display:flex;
    align-items: center;
    padding:10px 0 10px 10px;
}

.info .validate image{
    width:50px;
    height:50px;
    margin-right:10px;
}

.info .validate .txt{
    font-size:14px;
}

.info .validate .txt view{
    font-size:12px;
    color:#9b9b9a;
    margin-top:5px;
}

.info .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.info .list .item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.info .list .item .name{
    color:#9b9b9a;
}

.info .code{
    width:100%;
    height:350px;
}

.info .code image{
    width:100%;
    height:100%;
}
</style>